import React, { Component } from 'react'
import GetAddress from './../common/GetAddress.js'
// import * as Fetch from './../utils/http.js'

import { weatheList, resDatas } from './../utils/data'
import './../../css/home.css'
import { Modal } from 'antd-mobile'

import store from './../../store/index.js'
import { setWeather } from './../../store/actionCreators.js'



const alert = Modal.alert;
export default class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            weatherdetail: resDatas,
            home_btm_position: 0,
            clineWidth:0,
            clineHeight:0
        }
        store.subscribe(this.changeStore)
    }
    componentDidMount() {
        this.setState({
            clineWidth: document.documentElement.clientWidth,
            clineHeight: document.documentElement.clientHeight
        })
    }
    changeStore = () => {
        this.setState(store.getState())
    }
    getWeatherDetail = (res) => {
      this.setState({weatherdetail: res.result})
    }
    showAlert = (alertTitle, alertText) => {
      alert(alertTitle, alertText, [
        { text: '确认', onPress: () => console.log('alert') },
      ]);
    }
    lifeClick = (e) => {
      this.showAlert(e.iname, e.detail)
    }
    goToWeek = (e) => {
      let arr = []
      for(let key in this.state.weatherdetail.future) {
        arr.push(this.state.weatherdetail.future[key])
      }
      let obj = JSON.parse(JSON.stringify(this.state.weatherdetail))
      arr.forEach(item => {
        item.weather_icon_fa = this.weatheIcon(item.weather_id.fa)
        item.weather_icon_fb = this.weatheIcon(item.weather_id.fb)
        item.tempFisrt = parseInt(item.temperature.split('~')[0])
        item.tempLast = parseInt(item.temperature.split('~')[1])
        item.dates = item.date.substr(4,2) + '/' + item.date.substr(6,2)
      })
      obj.future = JSON.parse(JSON.stringify(arr))
      const action = setWeather(obj)
      store.dispatch(action)
      this.props.history.push('/week')
    }
    weatheIcon = (code)=> {
      let icon = ''
      weatheList.forEach(item => {
        if(item.wid === code) {
          icon = item.icon
        }
      })
      return icon
    }
    render() {
        return (
            <div ref='home' className='home'>
                <div>
                    <GetAddress getdetail={this.getWeatherDetail} goToUrl={this.goToWeek}></GetAddress>
                    {
                      this.state.weatherdetail && this.state.weatherdetail.today
                      ?
                      <div>
                        <div className='home-top home-top-1'>
                          <div>
                            <p>{this.state.weatherdetail.sk.temp}℃</p>
                            <p>{this.state.weatherdetail.today.date_y}</p>
                          </div>
                          <div>
                            <p className='text-cnt'>{this.state.weatherdetail.today.weather}</p>
                            <p className='text-cnt'>{this.state.weatherdetail.today.wind}</p>
                          </div>
                        </div>
                        <div className='home-top'>
                          <div>
                            <p className='iconfont icon-shidu'></p>
                            <p>湿度：{this.state.weatherdetail.sk.humidity}</p>
                          </div>
                          <div>
                            <p className='iconfont icon-kongqiwendu'></p>
                            <p>温度：{this.state.weatherdetail.sk.temp}℃</p>
                          </div>
                          <div>
                            <p className='iconfont icon-fengsu'></p>
                            <p>风力：{this.state.weatherdetail.sk.wind_strength}</p>
                          </div>
                          <div>
                            <p className='iconfont icon-shidu'></p>
                            <p>风向：{this.state.weatherdetail.sk.wind_direction}</p>
                          </div>
                        </div>
                        <div className='home-top'>
                          <div>
                            <p className='iconfont icon-jiguang'></p>
                            <p>紫外线：{this.state.weatherdetail.today.uv_index}</p>
                          </div>
                          <div>
                            <p className='iconfont icon-yundong'></p>
                            <p>运动：{this.state.weatherdetail.today.exercise_index}</p>
                          </div>
                          <div>
                            <p className='iconfont icon-xiche'></p>
                            <p>洗车：{this.state.weatherdetail.today.wash_index}</p>
                          </div>
                          <div>
                            <p className='iconfont icon-app_icons--'></p>
                            <p>出游：{this.state.weatherdetail.today.travel_index}</p>
                          </div>
                        </div>
                      </div>
                      :
                      ""
                    }
                </div>
            </div>
        )
    }
}